<template>
    <div class="payment-shade">

        <div class="wrap" :style="{'line-height':h,'height':h,'width':w}">

            <div class="payment-body">
                <div>
                    <div class="payment-close" @click="close"></div>
                    <div class="payment-title">选择支付渠道</div>

                    <div data-pay="wx_pub" class="pay-type" @click="pay('wx_pub')">
                        微信支付
                    </div>
                </div>

                <!--<div class="pay-type" data-pay="alipay_wap" i-tap="pay">-->
                <!--支付宝支付-->
                <!--</div>-->

            </div>
        </div>

    </div>
</template>

<script type="text/babel">
    import http from '../libs/http'
    import {wx} from'../libs/wx';
    import {pingpp} from '../libs/pingpp';

    export default{
        props: ['bill_id', 'order_id'],
        data(){
            return {
                h: db.h + 'px',
                w: db.w + 'px',
                pading: false

            };
        },
        ready: function () {
            var self = this;
        },
        methods: {
            pay: function (channel) {
                var self = this;
                var payInfo;
                switch (channel) {
                    case 'wx_pub':
                        //微信 - 公众号支付
                    {
                        payInfo = {
                            channel: 'wx_pub',
                            extra: {
                                open_id: db.wx_openId
                            }
                        };
                        break;
                    }
                    case 'alipay_wap':
                        //支付宝 - 手机网页支付
                    {
                        payInfo = {
                            channel: 'alipay_wap',
                            extra: {
                                success_url: '',//todo 支付宝付款回调地址
                                cancel_url: ''
                            }
                        };
                        break;
                    }
                }

                if (self.pading)
                    return;

                self.pading = true;

                this.$dispatch('start');

                http.get({
                    url: api + 'pay/charge',
                    data: {
                        _id: self.bill_id,
                        channel: payInfo.channel,
                        extra: payInfo.extra
                    },
                    jsonp: true
                }).then(function (obj) {
                    if (obj.code == 0) {
                        var charge = obj.data;

                        if (agent.isWechat) {
                            wx.check.done(function () {
                                        pingpp.createPayment(charge, function (result, error) {
                                            if (result == "success") {
                                                // 只有微信公众账号 wx_pub 支付成功的结果会在这里返回，其他的 wap 支付结果都是在 extra 中对应的 URL 跳转。

                                                http.get({
                                                    url: api + 'user/poll_order_success',
                                                    jsonp: true,
                                                    data: {
                                                        _id: self.order_id,
                                                    }
                                                }).then(function (obj) {
                                                    if (obj.code == 0) {
                                                        self.$dispatch('success');
                                                    } else {
                                                        if (obj.msg)
                                                            self.$dispatch('toast', obj.msg);
                                                        else
                                                            self.$dispatch('toast', '还没收到渠道支付成功通知,请稍后重试,如有疑义,请联系客服');
                                                    }

                                                    self.$dispatch('finish');

                                                    if (self.$route.name != 'order')
                                                        self.$route.router.go({
                                                            name: 'order',
                                                            params: {order_id: self.order_id},
                                                            replace: true
                                                        });
                                                });

                                            } else if (result == "fail") {
                                            } else if (result == "cancel") {
                                                // 微信公众账号支付取消支付
                                                self.$dispatch('toast', '已取消,请重新支付');
                                            }

                                            self.$dispatch('finish');

                                            // charge 不正确或者微信公众账号支付失败时会在此处返回
                                            if (self.$route.name != 'order')
                                                self.$route.router.go({
                                                    name: 'order',
                                                    params: {order_id: self.order_id},
                                                    replace: true
                                                });
                                        });
                                    }
                            );

                        } else
                            self.$dispatch('toast', '支付系统异常情况');

                    } else {

                    }

                    self.pading = false;
                });
            },

            close: function () {

                this.$dispatch('finish');

                if (this.$route.name != 'order')
                    this.$route.router.go({
                        name: 'order',
                        params: {order_id: this.order_id},
                        replace: true
                    });
            }
        }
    }
</script>

<style scoped>
    .pay-type {
        background: #f0f0f0 no-repeat 16px center;
        background-size: 24px;
        font-size: 16px;
        text-align: left;
        padding-left: 48px;
        height: 44px;
        line-height: 44px;
        margin-top: 8px;
    }

    [data-pay="wx_pub"] {
        background-image: url(../../static/img/ic_pay_wxpay.png);
    }

    [data-pay="alipay_wap"] {
        background-image: url(../../static/img/ic_pay_alipay.png);
    }

    .wrap {
        top: 0;
        position: absolute;
        text-align: center;
        z-index: 202;

    }

    .payment-shade {
        position: fixed;
        width: 100%;
        bottom: 0;
        height: 100%;
        left: 0;
        opacity: 1;
        z-index: 200;
        transition: opacity 0.3s;
        -webkit-transition: opacity 0.3s;
        background: rgba(0, 0, 0, 0.4);
    }

    .payment-body {
        position: relative;
        transition: width 0.2s;
        background: #fafafa;
        display: inline-block;
        -webkit-transition: height 0.2s;
        line-height: 1;
        width: 300px;
    }

    .payment-body > div {
        text-align: center;
        padding: 8px;
        opacity: 1;
        transition: opacity 0.1s;
        -webkit-transition: opacity 0.1s;
    }

    .payment-title {
        padding: 10px;
        font-size: 14px;
        color: #888888;
    }

    .payment-close {
        position: absolute;
        right: 0;
        margin: 12px 16px;
        width: 12px;
        height: 12px;
        float: right;
        background: url(../../static/img/ic_close.png) no-repeat center;
        background-size: contain;
    }

</style>